<!--
 * @Description: 
 * @Author: binbin
 * @Date: 2025-04-23
 * @LastEditors: Bart 1714877505@qq.com
 * @LastEditTime: 2025-04-27
-->
<template>
  <div class="detail-box">
    <div class="header">上市管理-操作详情</div>
    <div class="detail">
      <div class="detail-item">
        <div class="detail-item-requirement">
          <div class="detail-item-req-ite detail-item-req-name">
            <text class="lable">积分名称</text>
            <text class="code">{{ detailData.coinName }}</text>
          </div>
          <div class="detail-item-req-ite detail-item-req-name">
            <text class="lable">发行平台名称</text>
            <text class="code">{{ detailData.companyName }}</text>
          </div>
          <div class="detail-item-req-ite">
            <text class="lable">接入时间</text>
            <text class="code">{{ detailData.createTime }}</text>
          </div>
          <div class="detail-item-req-ite">
            <text class="lable">积分代号</text>
            <text class="code">{{ detailData.coinSymbol }}</text>
          </div>
          <div class="detail-item-req-ite">
            <text class="lable">币对管理 </text>
            <div class="code coin-symbols">
              <div class="select-item" v-for="(item, index) in coinSymbols" :key="index">
                <a-select v-model:value="item.value" placeholder="请选择" style="width: 400px">
                  <a-select-option v-for="option in item.list" :key="option.value" :value="option.value">{{ option.label }}</a-select-option>
                </a-select>
                <span v-if="index === 0" @click="handleAddCoin">添加</span>
                <span v-if="index !== 0" @click="handleDeleteCoin(index)">删除</span>
              </div>
            </div>
          </div>
          <div class="detail-item-req-ite">
            <text class="lable">交易管理</text>
            <text class="code"><a-switch v-model:checked="whiteIpOpen" :unCheckedValue="0" :checkedValue="1" checked-children="开" un-checked-children="关" /></text>
          </div>
          <div class="detail-item-req-ite">
            <text class="lable">备注</text>
            <text class="code"><a-textarea v-model:value="requireDesc" style="width: 400px" :maxlength="200" placeholder="请输入" allow-clear /></text>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <a-button type="primary" @click="onEdit">保存</a-button>
      <a-button class="back" @click="pageBack()">取消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { onMounted, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import { requestGetcoinPair, requestGetCoinSymbols, requestUpdateCoinPair } from '/@/api/exchange/lanuch'

  const router = useRouter()
  const route = useRoute()
  const { pairId } = route.query
  const list = ref<LanuchTypes.IResponse[]>([])
  const requireDesc = ref<string>('')
  const whiteIpOpen = ref<number | undefined>(0)
  const detailData = ref<any>({})
  const coinSymbols = ref<any>([])

  /**回退页面*/
  const pageBack = () => {
    router.back()
  }

  const onEdit = async () => {
    /**编辑详情 */
    const res = await requestUpdateCoinPair({
      pairId: pairId,
      coinSymbols: coinSymbols.value.filter((item) => item.value).map((item: any) => item.value),
      isEnable: whiteIpOpen.value,
      pairDescription: requireDesc.value,
    })
    if (res.responseCode === 100000000) {
      message.success('操作成功')
    } else {
      message.error(res.responseMessage)
    }
  }

  /**获取详情*/
  const getDetail = async () => {
    const res = await requestGetcoinPair(pairId)
    if (res.responseCode === 100000000) {
      detailData.value = res.responseData
      whiteIpOpen.value = res.responseData.isEnable
      requireDesc.value = res.responseData.pairDescription
      getCustomerRequireList()
    } else {
      message.error(res.responseMessage)
    }
  }

  /**获取需求单列表*/
  const getCustomerRequireList = async () => {
    const { responseData } = await requestGetCoinSymbols(pairId)
    list.value = responseData.filter((item) => {
      return detailData.value.coinSymbols.findIndex((item2) => item2 === item) === -1
    })
    coinSymbols.value = [
      {
        value: '',
        list: list.value.map((item: any) => {
          return {
            value: item,
            label: item,
            disabled: false,
          }
        }),
      },
    ]
  }
  // 添加币种对
  const handleAddCoin = () => {
    if (coinSymbols.value.length >= list.value.length) {
      message.error(`最多添加${list.value.length}个币种对`)
      return
    }
    coinSymbols.value.push({
      value: '',
      list: list.value.map((item: any) => {
        return {
          value: item,
          label: item,
          disabled: false,
        }
      }),
    })
  }

  // 删除币种对
  const handleDeleteCoin = (index: number) => {
    coinSymbols.value.splice(index, 1)
  }

  onMounted(() => {
    if (pairId) {
      getDetail()
    }
  })
</script>
<style lang="less" scoped>
  .detail-box {
    width: 100%;
    padding: 0 24px 30px;
    background: #fff;
    border-radius: 2px;

    .header {
      width: 100%;
      height: 64px;
      border-bottom: 1px solid #f2f3f5;
      font-size: 16px;
      font-weight: bold;
      color: #000;
      line-height: 64px;
    }

    .detail {
      width: 100%;
      margin-top: 20px;
      font-size: 16px;

      .detail-item {
        width: 100%;
        margin-bottom: 40px;

        .detail-item-title {
          color: #000;
        }

        &:first-child {
          display: flex;
          align-items: flex-start;
        }

        .detail-item-order {
          margin-left: 20px;

          .detail-item-order-select {
            width: 200px;
            margin-top: 20px;
          }
        }

        .detail-item-requirement {
          width: 100%;
          display: flex;
          flex-flow: column wrap;
          padding: 0 20px;
          box-sizing: border-box;

          .detail-item-req-ite {
            margin-top: 20px;
            font-size: 14px;
            display: flex;

            .lable {
              color: #666;
              padding-right: 10px;
              width: 100px;
              text-align: right;
            }

            .code {
              color: #000;
            }

            .icon {
              width: 80px;
              height: 80px;
              background: #f2f3f5;
              vertical-align: top;
            }

            .btn {
              padding-left: 30px;
            }

            .sample-temp {
              margin-left: 10px;
              color: #000;
            }

            .coin-symbols {
              display: flex;
              flex-direction: column;

              .select-item {
                display: flex;
                align-items: center;
                margin-bottom: 10px;

                span {
                  margin-left: 10px;
                  color: #08979c;
                  cursor: pointer;
                }
              }
            }
          }

          .detail-item-req-name {
            width: 100%;
          }
        }
      }
    }

    .footer {
      width: 100%;
      border-top: 1px solid #f2f3f5;
      padding-top: 20px;

      .back {
        margin-left: 20px;
      }
    }
  }
</style>
